<%@ page import="java.util.List" %>
<%@ page import="com.swt.draw.entity.YjTemplate" %>
<%@ page import="com.swt.draw.vo.TemplateVO" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/10/28 0028
  Time: 0:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>模板编辑</title>
    <link rel="stylesheet" href="/gzht/lib/layui/css/layui.css" media="all">
    <style>
        .box{
            width: 700px;
            margin: 1rem auto;
            border-top: 1px solid black;
        }
        .template_area {
            width: 64px;
            height: 100vh;
            margin: 0 auto;
            border-left: 1px solid #009688;
            border-right: 1px solid #009688;
            position: relative;
            text-align: center;
            overflow: auto;
        }
        ::-webkit-scrollbar{width:0px}
    </style>
</head>
<body>
<%--模板展示--%>
<div class="box">
    <div class="template_area">
    </div>
</div>
<a class="layui-btn" style="position: fixed; right: 5rem; top: 5rem;" href="javascript:window.history.back(-1);">返回</a>
<a class="layui-btn layui-btn-danger" style="position: fixed; right: 5rem; top: 8rem;" id="delTemplate">删除</a>


<script type="text/javascript" src="/gzht/statics/js/jquery-1.12.2.min.js"></script>
<script src="/gzht/lib/layui/layui.js"></script>
<script>
    var jh = "<%= request.getParameter("jh")%>"
    var time = "<%= request.getParameter("time").replace(" ","+")%>"
    var yg = "";// 油管图片
    var yarr = [];
    var imgCount = 999;
    function imgOnload(e) {
        var width = e.width;
        var height = e.height;
        var xloc = e.getAttribute('data-xloc');
        var yloc = e.getAttribute('data-yloc');
        e.style.position='absolute';
        e.style.left = (64 - width) / 2 + "px";
        e.style.top=yloc+"px";
        yarr.push(parseInt(yloc))
    }

    var interval = setInterval(function () {
        if(yarr.length == imgCount){
            yarr.sort(function(a,b){return a-b;})
            var max = yarr[yarr.length-1];
            var img = document.createElement("img");
            img.style.cssText = "width: 30px;height:" + max + "px;";
            img.src=yg;
            document.getElementsByClassName("template_area")[0].appendChild(img)
            img.onload = function(e){
                console.log('add',e)
            }
            clearInterval(interval)
        }
    },500)

    layui.use(["layer","jquery"],function () {
        var layer = layui.layer,
            $=layui.jquery;
        $.ajax({
            url: '/gzht/template/getYjs',
            data: {
                jh: "<%= request.getParameter("jh")%>",
                time: "<%= request.getParameter("time").replace(" ","+")%>"
            },
            async: false,
            success: function (res) {
                if(res.code == 1001){
                    var yjs = res.data;
                    for(var yj of yjs){
                        var img = '<img title="'+yj.yjk.sm+'" src="data:image/jpeg;base64,'+ yj.yjk.pic +'" data-yloc="'+yj.yjTemplate.ylocation+'" data-xloc="'+ yj.yjTemplate.xlocation +'" onload="imgOnload(this)">'
                        $('.template_area').append(img)
                    }
                    imgCount = yjs.length;
                }
            }
        })

        // 删除模板
        $('#delTemplate').click(function () {
            layer.confirm("确定删除该模板？",function () {
                $.ajax({
                    url: '/gzht/template/delete',
                    data:{
                        jh: jh,
                        time: time
                    },
                    type:"post",
                    success: function (res) {
                        if(res.code == 1001){
                            layer.msg("删除成功",{
                                icon: 1,
                                time: 500
                            },function () {
                                window.history.back(-1);
                            })
                        }
                    },
                    error: function (err) {
                        layer.msg("网络异常")
                    }
                })
            })
        });
    })
</script>
</body>
</html>
